<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>僵尸练习</title>
    <style>
        body{
            background-image: url("zombies/bg1.jpg");
            overflow: hidden;//去掉拖动条
        }
        img{
            position: absolute;
            width: 50px;
            height: 50px;
        }
    </style>

</head>
<body>
<h3 id="f_h3">跑掉数量:0</h3>
<h3 id="s_h3">干掉数量:0</h3>
<script src="../js/jquery-1.4.2.js"></script>
<script>
    let fCount = 0;
    let sCount = 0;


    //动态获取窗口尺寸
    let w = $(window).width();
    let h = $(window).height();
    //background-size: 500px 200px
    $("body").css("background-size",w+"px "+h+"px");
    //窗口尺寸改变事件
    onresize = function(){
        //动态获取窗口尺寸
        w = $(window).width();
        h = $(window).height();
        //background-size: 500px 200px
        $("body").css("background-size",w+"px "+h+"px");
    }
    //开启添加僵尸的定时器
    setInterval(function(){
        //0-19  20-39   49-49   60...
        //  0     1        2     3
        let type = parseInt(sCount/20);
        type = type>3? 3:type;
        // if(type>3){
        //     type=3;
        // }

        let zombImg = $("<img src='zombies/zomb"+type+".png'>");
        //给僵尸添加血量
        let hp = type+1;
        zombImg.attr("hp",hp)

        //得到随机僵尸据顶部的距离 取值范围(0-(窗口高-僵尸的高))
        let top =parseInt(Math.random()*(h-50));
        //把位置信息赋值给僵尸图片
        zombImg.css({"top":top+"px","left":w+"px"});
        $("body").append(zombImg)
        //给僵尸添加移入事件
        zombImg.mouseover(function(){
            //去除当前血量
            let hp = zombImg.attr("hp");
            hp--;
            zombImg.attr("hp",hp);//把新的血量放回去
            if(hp<=0){
                //删除僵尸
                zombImg.remove();
                sCount++;
                $("#s_h3").text("干掉数量:"+sCount);
            }
        })

    },300)

    //开启移动僵尸的定时器
    setInterval(function(){
        //得到所有僵尸图片 并遍历
        $("img").each(function(){
            //得到原来的left值 "1000px" parseInt传承数值 去掉了px
            let left = parseInt($(this).css("left"));
            left-=1;
            //把变小的值再次交给僵尸图片
            $(this).css("left",left+"px");
            if(left<50){
                $(this).remove();
                fCount++;
                $("#f_h3").text("跑掉数量:"+fCount)

                if(fCount>=10){
                    setInterval(function(){
                        alert("僵尸吃掉了你的脑子")
                        location.reload();//刷新页面
                    },50)
                }

            }

        })


    },30)


</script>


</body>
</html>